<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户认证管理平台</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            display: flex;
            flex-direction: column; /* 使页面内容从上到下排列 */
            height: 100vh; /* 使 body 高度占满整个视口高度 */
            overflow: hidden; /* 防止滚动条出现 */
        }

        .navbar {
            background-color: #333;
            overflow: hidden;
            position: fixed; /* 固定导航栏 */
            top: 0; /* 顶部对齐 */
            width: 100%; /* 宽度100% */
            z-index: 1000; /* 确保导航栏在其他内容之上 */
        }

        .navbar a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            background-color: #333;
        }

        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }

        .navbar a.active {
            background-color: #00BFFF;
            color: black;
        }

        .main-content {
            margin-top: 60px; /* 为主要内容区域留出顶部导航栏的高度 */
            margin-left: 60px; /* 为主要内容区域留出侧边栏的宽度 */
            padding: 10px;
            flex: 1; /* 使主要内容区域占据剩余空间 */
            overflow-y: auto; /* 允许垂直滚动 */
        }
    </style>
</head>
    <body>
        <div class="navbar">
            <a href="/">首页</a>
            <a href="/user">用户管理</a>
            <a href="/role">角色管理</a>
            <a href="/app">应用管理</a>
            <a href="/db/h2" target="_blank">数据库</a>
            <a href="/about" class="active">关于我们</a>
        </div>

        <div class="main-content active">
            <h1>关于我们</h1>
            <h2>Mail：zhangbinbinking@qq.com</h2>
            <h2>Home：<a href="http://www.elves.site" target="_blank">https://www.elves.site</a></h2>
        </div>

    </body>
</html>